<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主控制面板 - 原型图</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 40px;
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            font-weight: 300;
        }

        .popup-container {
            width: 400px;
            height: 600px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            overflow: hidden;
            margin: 0 auto 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            background: white;
        }

        .popup-header {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header-title {
            font-size: 1.2em;
            font-weight: 600;
        }

        .header-status {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .popup-content {
            padding: 20px;
            height: calc(100% - 60px);
            overflow-y: auto;
        }

        .scan-section {
            margin-bottom: 25px;
        }

        .scan-button {
            width: 100%;
            background: linear-gradient(135deg, #2196F3, #1976D2);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .scan-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
        }

        .scan-button:active {
            transform: translateY(0);
        }

        .media-section {
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .media-tabs {
            display: flex;
            background: #f5f5f5;
            border-radius: 8px;
            padding: 4px;
            margin-bottom: 15px;
        }

        .tab-button {
            flex: 1;
            background: transparent;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tab-button.active {
            background: white;
            color: #2196F3;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .media-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }

        .media-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.3s ease;
        }

        .media-item:hover {
            background: #f8f9fa;
        }

        .media-item:last-child {
            border-bottom: none;
        }

        .media-checkbox {
            margin-right: 12px;
        }

        .media-preview {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background: #e0e0e0;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #666;
        }

        .media-info {
            flex: 1;
        }

        .media-name {
            font-size: 0.9em;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }

        .media-details {
            font-size: 0.8em;
            color: #666;
        }

        .download-section {
            margin-bottom: 25px;
        }

        .download-button {
            width: 100%;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .download-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }

        .download-button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .progress-section {
            margin-bottom: 25px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #45a049);
            width: 65%;
            transition: width 0.3s ease;
        }

        .progress-text {
            font-size: 0.8em;
            color: #666;
            text-align: center;
        }

        .settings-section {
            border-top: 1px solid #e0e0e0;
            padding-top: 20px;
        }

        .settings-button {
            width: 100%;
            background: transparent;
            border: 1px solid #e0e0e0;
            color: #666;
            padding: 10px;
            border-radius: 6px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .settings-button:hover {
            background: #f8f9fa;
            border-color: #2196F3;
            color: #2196F3;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .feature-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            border: 2px solid #e9ecef;
        }

        .feature-title {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 8px 0;
            color: #555;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-list li::before {
            content: "✓";
            color: #4CAF50;
            font-weight: bold;
        }

        .mockup-container {
            display: flex;
            gap: 30px;
            margin-top: 40px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .mockup-item {
            text-align: center;
        }

        .mockup-label {
            font-size: 1.1em;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>主控制面板 - 原型图</h1>

        <div class="mockup-container">
            <div class="mockup-item">
                <div class="mockup-label">弹出窗口设计</div>
                <div class="popup-container">
                    <div class="popup-header">
                        <div class="header-title">📥 媒体下载器</div>
                        <div class="header-status">就绪</div>
                    </div>
                    <div class="popup-content">
                        <div class="scan-section">
                            <button class="scan-button">
                                🔍 扫描页面媒体
                            </button>
                        </div>

                        <div class="media-section">
                            <div class="section-title">📷 检测到的媒体</div>
                            <div class="media-tabs">
                                <button class="tab-button active">图片 (8)</button>
                                <button class="tab-button">视频 (3)</button>
                            </div>
                            <div class="media-list">
                                <div class="media-item">
                                    <input type="checkbox" class="media-checkbox" checked>
                                    <div class="media-preview">🖼️</div>
                                    <div class="media-info">
                                        <div class="media-name">banner.jpg</div>
                                        <div class="media-details">1920x1080 • 2.3MB • JPG</div>
                                    </div>
                                </div>
                                <div class="media-item">
                                    <input type="checkbox" class="media-checkbox" checked>
                                    <div class="media-preview">🖼️</div>
                                    <div class="media-info">
                                        <div class="media-name">product.png</div>
                                        <div class="media-details">800x600 • 1.1MB • PNG</div>
                                    </div>
                                </div>
                                <div class="media-item">
                                    <input type="checkbox" class="media-checkbox">
                                    <div class="media-preview">🖼️</div>
                                    <div class="media-info">
                                        <div class="media-name">icon.svg</div>
                                        <div class="media-details">64x64 • 2.1KB • SVG</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="download-section">
                            <button class="download-button">
                                ⬇️ 下载选中文件 (2)
                            </button>
                        </div>

                        <div class="progress-section">
                            <div class="progress-bar">
                                <div class="progress-fill"></div>
                            </div>
                            <div class="progress-text">下载进度: 65% (1/2 完成)</div>
                        </div>

                        <div class="settings-section">
                            <button class="settings-button">
                                ⚙️ 设置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-title">核心功能</div>
                <ul class="feature-list">
                    <li>自动扫描页面中的图片和视频</li>
                    <li>支持多种图片格式 (JPG, PNG, GIF, WebP, SVG)</li>
                    <li>支持多种视频格式 (MP4, WebM, AVI)</li>
                    <li>批量选择和下载功能</li>
                    <li>实时下载进度显示</li>
                    <li>文件信息预览 (尺寸、大小、格式)</li>
                </ul>
            </div>

            <div class="feature-card">
                <div class="feature-title">用户界面</div>
                <ul class="feature-list">
                    <li>简洁直观的弹出窗口设计</li>
                    <li>分类标签页 (图片/视频)</li>
                    <li>复选框选择机制</li>
                    <li>缩略图预览功能</li>
                    <li>进度条和状态指示</li>
                    <li>响应式布局设计</li>
                </ul>
            </div>

            <div class="feature-card">
                <div class="feature-title">交互设计</div>
                <ul class="feature-list">
                    <li>一键扫描页面媒体</li>
                    <li>智能文件命名建议</li>
                    <li>下载队列管理</li>
                    <li>暂停/恢复下载功能</li>
                    <li>错误处理和重试机制</li>
                    <li>设置面板配置选项</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>